<template>
  <div class="fix-menu-warp">
    <div class="menu-scroll-div">
      <MainHeader
          class="main-menu"
          :style="{marginTop:marginTop+'px'}"
          @setQuestionID="setQuestionID"></MainHeader>
      <QuestionHeader class="details-menu" :question="Question.question_title" :question-id="Question.question_id"></QuestionHeader>
      <el-dialog v-model="QComments" title="问题评论" @close="move">
        <QuestionComment
            v-if="QComments"
            :question="Question"
            :user="User"/>
      </el-dialog>
    </div>
  </div>
  <QuestionDetailedHeader
      :question="Question"
      :attention="AttentionStatus[0]"
      :like="AttentionStatus[1]"
      :user="User"
      class="QuestionDetailHeader"
      @setHeight="setHeight"
      @attentionQuestion="attentionQuestion"
      @likeQuestion="likeQuestion"
      @ShowQComments="ShowQComments"/>

  <div class="MainBox">
    <div class="AnswerBox">
      <Answer
          v-for="(answer,index) in Answer"
          :answer="answer"
          :index="index"
          :user="User"
          @attentionAnswerer="attentionAnswerer"
          @cancel_attentionAnswerer="cancel_attentionAnswerer"
          @likeAnswer="likeAnswer"
          @cancel_likeAnswer="cancel_likeAnswer"
          @collectAnswer="collectAnswer"
          @delAnswer="delAnswer"
      />
      <p class="NoAnswer" v-show="this.Answer.length==0">该问题目前没有回答</p>
    </div>
    <el-affix :offset="120">
      <div class="AuthorBox">
        <p class="AboutAuthorText">关于作者</p>
        <div class="UserPrimaryInfoBox">
          <div class="HeadPicture">
            <el-avatar :src="avatarError?'//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/default?t='+Math.random():'//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/'+this.Question.user_id+'?t='+Math.random()" class="pic" @error="this.avatarError=!this.avatarError"/>
          </div>
          <div class="UserNameBox">
            <el-text class="UserName">{{Quizzer.username}}</el-text>
            <el-text class="AuthorJob">{{Quizzer.industry}}</el-text>
          </div>
        </div>
        <el-divider />
        <div class="UserInfo">
          <div class="UserSignalInfoBox">
            <el-text class="text">被关注</el-text>
            <el-text class="number">{{Quizzer.liked_count}}</el-text>
          </div>
          <div class="UserSignalInfoBox">
            <el-text class="text">提问</el-text>
            <el-text class="number">{{Quizzer.QuestionNumber}}</el-text>
          </div>
        </div>
        <div class="infoBtnBox">
          <el-button :type="AttentionStatus[2]?'info':'primary'" plain :icon="Plus" class="infoBtn attentionBtn" @click="attentionAuthor">{{AttentionStatus[2]?"已关注":"关注他"}}</el-button>
          <el-button type="info" plain :icon="ChatDotRound" class="infoBtn">发私信</el-button>
        </div>
      </div>
    </el-affix>
    <!--不知道为啥,affix无效
    <el-affix :offset="200" target=".MainBox" class="affix">
      <el-button type="primary">Target container</el-button>
    </el-affix>
    -->
  </div>
</template>

<script>
import Login from "@/components/LoginAndRegister/Login";
import Register from "@/components/LoginAndRegister/Register";
import MainHeader from "@/components/common/MainHeader";
import QuestionHeader from "@/components/common/QuestionHeader";
import QuestionDetailedHeader from "@/components/common/QuestionDetailedHeader";
import Answer from "@/components/common/Answer";
import QuestionComment from "@/components/common/QuestionComment";
import {Plus,ChatDotRound} from "@element-plus/icons-vue";
export default {
  name: "LoginAndRegister",
  setup() {
    return {
      Plus,
      ChatDotRound
    }
  },
  components:{
    QuestionHeader,
    MainHeader,
    QuestionDetailedHeader,
    Login,
    Register,
    Answer,
    QuestionComment
  },
  data(){
    return {
      DetailHeight:0,
      marginTop:0,
      UserLikeNumber:0,//问题作者被关注数
      QuestionNumber:0,//问题作者总的提问数
      User:{},
      token:"",
      QuestionID:0,
      Question:{},
      Quizzer:{},
      Answer:[],
      AttentionStatus:[],
      QComments:false,//是否展示问题的评论
      avatarError:false
    }
  },
  mounted() {

  },
  methods: {
    changeModule(){
      this.module=!this.module
    },
    handleScroll(){
      let newScrollTop = document.documentElement.scrollTop;
      if( newScrollTop >= this.DetailHeight ){
        this.marginTop=-80
      }else{
        this.marginTop=0
      }
    },
    setHeight(height){
      this.DetailHeight=height
    },
    ShowQComments(){
      this.QComments=true
      this.stop()
    },
    attentionAuthor(){
      if(!this.AttentionStatus[2]){
        this.$axios
            .post(`${this.$target}/follow?from_id=`+this.User.id+`&to_id=`+this.Question.user_id+`&type=0`)
            .then(res=>{
              if(res.data.data){
                this.notifySucceed("关注成功!")
                this.Quizzer.liked_count++
                this.AttentionStatus[2]=true
                for(let i=0;i<this.Answer.length;i++){
                  if(this.Answer[i].user_id===this.Quizzer.id){
                    this.Answer[i].is_follow=!this.Answer[i].is_follow
                  }
                }
              }else{
                this.notifyError("关注失败")
              }
            })
      }else{
        this.$axios
            .delete(`${this.$target}/follow?from_id=`+this.User.id+`&to_id=`+this.Question.user_id+`&type=0`)
            .then(res=>{
              if(res.data.data){
                this.notifySucceed("取关成功!")
                this.Quizzer.liked_count--
                this.AttentionStatus[2]=false
                for(let i=0;i<this.Answer.length;i++){
                  if(this.Answer[i].user_id===this.Quizzer.id){
                    this.Answer[i].is_follow=!this.Answer[i].is_follow
                  }
                }
              }else{
                this.notifyError("取关失败")
              }
            })
      }
    },
    //禁止滚动
    stop(){
      var mo=function(e){
        e.preventDefault();
      };
      document.body.style.overflow='hidden';
      document.addEventListener("touchmove",mo,false);//禁止页面滑动
    },
    //取消滑动限制
    move(){
      var mo=function(e){
        e.preventDefault();
      };
      document.body.style.overflow='';//出现滚动条
      document.removeEventListener("touchmove",mo,false);
    },
    setQuestionID(id){
      this.QuestionID=id
      window.addEventListener("scroll",this.handleScroll)
      this.User=JSON.parse(localStorage.getItem("user"))
      this.$axios
          .get(`${this.$target}/question/detail?question_id=`+this.QuestionID)
          .then(res=>{
            this.module=false
            this.Question=res.data.data
            this.$axios
                .get(`${this.$target}/user/`+this.Question.user_id+`/info`)
                .then(res=>{
                  this.Quizzer=res.data.data
                  this.Quizzer.QuestionNumber=0
                  this.$axios
                      .get(`${this.$target}/question/user_id?user_id=`+this.Quizzer.id)
                      .then(res=>{
                        this.Quizzer.QuestionNumber=res.data.data.length
                      })
                  this.$axios
                      .get(`${this.$target}/union/001?user_id=`+this.User.id+`&question_id=`+this.QuestionID)
                      .then(res=>{
                        this.AttentionStatus=res.data.data
                      })
                })
          })
      this.$axios
          .get(`${this.$target}/answer/question_id?question_id=`+this.QuestionID+`&user_id=`+this.User.id)
          .then(res=>{
            this.Answer=res.data.data
          })
    },
    attentionQuestion() {
      this.AttentionStatus[0]=!this.AttentionStatus[0]
    },
    likeQuestion() {
      this.AttentionStatus[1]=!this.AttentionStatus[1]
    },
    attentionAnswerer(index) {
      this.Answer[index].is_follow=true
      if(this.Answer[index].user_id===this.Quizzer.id){
        this.Quizzer.liked_count++
        this.AttentionStatus[2]=true
      }
    },
    cancel_attentionAnswerer(index) {
      this.Answer[index].is_follow=false
      if(this.Answer[index].user_id===this.Quizzer.id){
        this.Quizzer.liked_count--
        this.AttentionStatus[2]=false
      }
    },
    likeAnswer(index) {
      this.Answer[index].is_like=true
      this.Answer[index].liked_count++
    },
    cancel_likeAnswer(index) {
      this.Answer[index].is_like=false
      this.Answer[index].liked_count--
    },
    collectAnswer(index){
      this.Answer[index].is_collected=!this.Answer[index].is_collected
    },
    delAnswer(index){
      this.Answer.splice(index,1)
    }

  }
}
</script>

<style src="@/assets/less/QuestionDetail.less" scoped lang="less"></style>